<template>
  <cus-view :loading="loading" :body-style="{ height: '100%'}">
    <flex-box mode="column" align-items="stretch" class="create-container">
      <flex-box class="create-header">
        <span class="title">{{ title }}</span>
        <img class="close" src="/image/close.png" @click="handleClose">
      </flex-box>
      <div class="create-flex">
        <cus-section title="基本信息">
          <flex-box mode="column" align-items="stretch">
            <div class="create-body">
              <el-form ref="basicForm" :model="model" :rules="rules" label-position="top" class="create-box">
                <el-form-item class="create-item left" prop="customerCode">
                  <span slot="label">客户编码</span>
                  <el-input v-model="model.customerCode" placeholder="请输入商城编码" @change="handleCheckCode" />
                </el-form-item>
                <el-form-item class="create-item right" prop="customerName">
                  <span slot="label">客户名称</span>
                  <el-input v-model="model.customerName" type="text" />
                </el-form-item>
                <el-form-item class="create-item left">
                  <span slot="label">营业执照号</span>
                  <el-input v-model="model.bizLicenceNo" type="text" />
                </el-form-item>
                <el-form-item class="create-item right" prop="bankName">
                  <span slot="label">开户银行</span>
                  <el-input v-model="model.bankName" type="number" />
                </el-form-item>
                <el-form-item class="create-item left" prop="marketingDeptContact">
                  <span slot="label">银行账户</span>
                  <el-input v-model="model.bankAccount" type="text" />
                </el-form-item>
              </el-form>
            </div>
          </flex-box>
        </cus-section>
        <cus-section title="详细信息">
          <flex-box mode="column" align-items="stretch">
            <div class="create-body">
              <el-form ref="detailForm" :model="model" :rules="rules" label-position="top" class="create-box">
                <el-form-item class="create-item left" prop="contactName">
                  <span slot="label">联系人姓名</span>
                  <el-input v-model="model.contactName" type="number" />
                </el-form-item>
                <el-form-item class="create-item right" prop="contactPhone">
                  <span slot="label">联系人电话</span>
                  <el-input v-model="model.contactPhone" type="number" />
                </el-form-item>
                <el-form-item class="create-item left" prop="contactEmail">
                  <span slot="label">联系人邮件</span>
                  <el-input v-model="model.contactEmail" type="number" />
                </el-form-item>
                <el-form-item class="create-item right" prop="openDate">
                  <span slot="label">开业时间</span>
                  <el-date-picker v-model="model.openDate" type="date" style="width: 100%" />
                </el-form-item>
                <el-form-item class="create-item left" prop="enrollDate">
                  <span slot="label">入驻时间</span>
                  <el-date-picker v-model="model.enrollDate" type="date" style="width: 100%" />
                </el-form-item>
                <el-form-item class="create-item right" prop="webSite">
                  <span slot="label">网站地址</span>
                  <el-input v-model="model.webSite" type="number" />
                </el-form-item>
                <el-form-item class="create-item left" prop="companyName">
                  <span slot="label">所属企业名称</span>
                  <el-input v-model="model.companyName" type="number" />
                </el-form-item>
              </el-form>
            </div>
          </flex-box>
        </cus-section>
      </div>
      <div class="handle-bar">
        <el-button class="handle-button" @click.native="handleClose">取消</el-button>
        <el-button class="handle-button" type="primary" @click.native="handleSubmit">提交</el-button>
      </div>
    </flex-box>
  </cus-view>
</template>

<script>
import SaveMixin from '@/mixins/Save'
import CustomerApi from '@/api/basic/CustomerApi'

export default {
  name: 'CustomerSave',
  mixins: [SaveMixin],
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '客户',
      model: {
        customerCode: null,
        customerName: null
      },
      usageScenarios: [],
      rules: {
        customerCode: [{ required: true, message: '客户编码不能为空', trigger: ['blur', 'change'] }],
        customerName: [{ required: true, message: '客户名称不能为空', trigger: ['blur', 'change'] }]
      }
    }
  },
  mounted() {
    this.setApi(CustomerApi)
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    handleSubmit() {
      let formValid = false
      this.$refs.basicForm.validate(valid => { formValid = valid })
      this.$refs.detailForm.validate(valid => { formValid = valid })
      if (formValid) {
        if (this.id) {
          CustomerApi.edit(this.model).then(res => {
            this.$message.success('修改成功')
            this.handleCallback()
            this.handleClose()
          })
        } else {
          CustomerApi.add(this.model).then(res => {
            this.$message.success('添加成功')
            this.handleCallback()
            this.handleClose()
          })
        }
      }
    },
    handleProvinceSelected(value) {
      this.model.province = value.value
    },
    handleCitySelected(value) {
      this.model.city = value.value
    },
    handleAreaSelected(value) {
      this.model.district = value.value
    },
    handleUsageScenariosChange(val) {
      this.model.usageScenarios = this.usageScenarios.join(',')
    }
  }
}
</script>

<style lang="scss" scoped>
.create-container {
  position: relative;
  height: 100%;
  .create-header {
    height: 40px;
    margin-bottom: 20px;
    padding: 0 10px;
    flex-shrink: 0;
    .title {
      flex:1;
      font-size:17px;
      font-weight: bold;
      color:#333;
    }
    .close {
      display: block;
      width: 40px;
      height: 40px;
      margin-right: -10px;
      padding: 10px;
      cursor: pointer;
    }
  }
  .create-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    .create-item {
      flex: 0 0 50%;
      flex-shrink: 0;
      // overflow: hidden;
      padding-bottom: 10px;
    }
    .create-block-item {
      flex: 0 0 100%;
      flex-shrink: 0;
      padding-bottom: 10px;
    }
    .create-item-label {
      margin: 5px 0;
      font-size: 14px;
      word-wrap: break-word; // 允许长单词换行
      word-break: break-all; // 允许在单词内换行
      .create-item-label-tips {
        font-size: 12px;
        padding-left: 2px;
        color: #999;
      }
    }
  }
  .create-flex {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
  }
  .create-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }
  .left {
    padding-right: 10px;
  }
  .right {
    padding-left: 10px;
  }
}
// 使选择器能够作用得“更深”，例如影响子组件
.el-form ::v-deep .el-form-item {
  margin-bottom: 0px;
}
.el-form-item ::v-deep .el-form-item__label {
  line-height: normal;
  font-size: 12px;
  font-weight: normal;
  color: #333333;
  position: relative;
  padding-left: 8px;
  padding-bottom: 0;
}
.el-form ::v-deep .el-form-item.is-required .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
  position: absolute;
  left: 0;
  top: 5px;
}

.handle-bar {
  position: relative;
  .handle-button {
    float: right;
    margin-top: 5px;
    margin-right: 20px;
  }
}

.el-button + .el-button {
  margin-left: 0;
}

.distpicker-address-wrapper ::v-deep select {
  height: 34px;
  font-size: 12px;
  border-radius: 0.1rem;
}
</style>
